<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <title>树形多选选择器</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="tree" style="height: 400px ;width: 300px;overflow-y: auto;border: 1px solid #e6e6e6"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-1">
                                    <div class="layui-transfer-box" data-index="0" style="width: 250px; height: 400px;">
                                        <div class="layui-transfer-header">
                                            <input type="checkbox" name="layTransferLeftCheckAll" lay-filter="layTransferCheckbox" lay-type="all"
                                                   lay-skin="primary" title="未选择">
                                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                                <span>未选择</span>
                                                <i class="layui-icon layui-icon-ok"></i>
                                            </div>
                                        </div>
                                        <div class="layui-transfer-search">
                                            <i class="layui-icon layui-icon-search"></i>
                                            <input type="text" class="layui-input" placeholder="关键词搜索" autocomplete="off">
                                        </div>
                                        <ul class="layui-transfer-data" style="height: 307px">
                                            <p class="layui-none">无数据</p>
                                        </ul>
                                    </div>
                                    <div class="layui-transfer-active">
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">
                                            <i class="layui-icon layui-icon-next"></i>
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">
                                            <i class="layui-icon layui-icon-prev"></i>
                                        </button>
                                    </div>
                                    <div class="layui-transfer-box" data-index="1" style="width: 250px; height: 400px;">
                                        <div class="layui-transfer-header">
                                            <input type="checkbox" name="layTransferRightCheckAll" lay-filter="layTransferCheckbox" lay-type="all"
                                                   lay-skin="primary" title="已选择">
                                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                                <span>已选择</span>
                                                <i class="layui-icon layui-icon-ok"></i>
                                            </div>
                                        </div>
                                        <div class="layui-transfer-search">
                                            <i class="layui-icon layui-icon-search"></i>
                                            <input type="text" class="layui-input" placeholder="关键词搜索" autocomplete="off">
                                        </div>
                                        <ul class="layui-transfer-data" style="height: 307px">
                                            <p class="layui-none">无数据</p>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" id="submit">提交</button>
                    <button class="layui-btn layui-btn-primary" type="button" id="cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/script/common.js" charset="utf-8"></script>
<script>
    var params = JSON.parse(decodeURI(getRequestParams("params")));

    layui.use(['baseUtil'], function () {
        var $ = layui.jquery,
            tree = layui.tree,
            baseUtil = layui.baseUtil;

        var dataList = [];

        initTreeDate();
        initDataList();

        function initTreeDate () {
            baseUtil.doPostData(params.treeUrl, {}, function (data) {
                tree.render({
                    id: 'tree',
                    elem: '#tree',
                    data: data,
                    onlyIconControl: true,
                    text: {
                        none: '无数据'
                    },
                    click: function (obj) {
                        initDataList(baseUtil.getAllChildId(obj.data).join(","));
                    }
                });
                if (isEmpty(data)) {
                    $('.layui-tree-emptyText').attr('style', 'padding-top:200px');
                }
            });
        }

        function initDataList (id) {
            if (isBlank(id) && isNotBlank(params.ids)) {
                let ids = params.ids.split(',');
                ids.forEach(function (e) {
                    dataList.push({ id: e, name: '', checked: false, selected: true });
                });
            }
            for (let i = 0; i < dataList.length; i++) {
                if (!dataList[i].selected) {
                    dataList.splice(i, i + 1);
                    i--;
                }
            }
            baseUtil.doPostData(params.dataUrl, { id: id }, function (data) {
                if (isEmpty(dataList)) {
                    if (isNotEmpty(data)) {
                        data.forEach(function (e) {
                            dataList.push({ id: e.id, name: e.name, checked: false, selected: false });
                        });
                    }
                } else {
                    if (isNotEmpty(data)) {
                        data.forEach(function (e) {
                            for (let i = 0; i < dataList.length; i++) {
                                if (e.id === dataList[i].id) {
                                    if (isBlank(dataList[i].name)) {
                                        dataList[i].name = e.name;
                                    }
                                    break;
                                } else {
                                    if (i === dataList.length - 1) {
                                        dataList.push({ id: e.id, name: e.name, checked: false, selected: false });
                                    }
                                }
                            }
                        });
                    }
                }
                initTransferData();
            });
        }

        function initTransferData () {
            $('.layui-transfer-header').find('.layui-form-checkbox').removeClass('layui-form-checked');
            $('.layui-transfer-active').find('button').addClass('layui-btn-disabled');
            let strLeft = '';
            let strRight = '';
            dataList.forEach(function (e) {
                let str = '';
                str += '<li>';
                str += '<input type="checkbox" name="layTransferLeftCheck" lay-skin="primary" lay-filter="layTransferCheckbox" title="' + e.name + '" value="' + e.id + '">';
                if (e.checked) {
                    str += '<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">';
                } else {
                    str += '<div class="layui-unselect layui-form-checkbox" lay-skin="primary">';
                }
                str += '<span>' + e.name + '</span>';
                str += '<i class="layui-icon layui-icon-ok"></i>';
                str += '</div>';
                str += '</li>';
                if (e.selected) {
                    strRight += str;
                } else {
                    strLeft += str;
                }
            });
            if (isBlank(strLeft)) {
                $($('.layui-transfer-data')[0]).html('<p class="layui-none">无数据</p>');
            } else {
                $($('.layui-transfer-data')[0]).html(strLeft);
                for (let i = 0; i < dataList.length; i++) {
                    if (dataList[i].checked && !dataList[i].selected) {
                        $($('.layui-transfer-active').find('button')[0]).removeClass('layui-btn-disabled');
                        break;
                    }
                }
            }
            if (isBlank(strRight)) {
                $($('.layui-transfer-data')[1]).html('<p class="layui-none">无数据</p>');
            } else {
                $($('.layui-transfer-data')[1]).html(strRight);
                for (let i = 0; i < dataList.length; i++) {
                    if (dataList[i].checked && dataList[i].selected) {
                        $($('.layui-transfer-active').find('button')[1]).removeClass('layui-btn-disabled');
                        break;
                    }
                }
            }
            $('li').bind('click', function () {
                //单选按钮
                let checkbox = $(this).find('.layui-form-checkbox');
                if (checkbox.hasClass('layui-form-checked')) {
                    checkbox.removeClass('layui-form-checked');
                } else {
                    checkbox.addClass('layui-form-checked');
                }
                //全选按钮
                if ($(this.parentNode).find('li').length === $(this.parentNode).find('li .layui-form-checked').length) {
                    $(this.parentNode.parentNode).find('.layui-transfer-header').find('.layui-form-checkbox').addClass('layui-form-checked');
                } else {
                    $(this.parentNode.parentNode).find('.layui-transfer-header').find('.layui-form-checkbox').removeClass('layui-form-checked');
                }
                //左移右移按钮
                if ($(this.parentNode).find('li .layui-form-checked').length === 0) {
                    if ($(this.parentNode.parentNode).attr('data-index') === '0') {
                        $($('.layui-transfer-active').find('button')[0]).addClass('layui-btn-disabled');
                    } else if ($(this.parentNode.parentNode).attr('data-index') === '1') {
                        $($('.layui-transfer-active').find('button')[1]).addClass('layui-btn-disabled');
                    }
                } else {
                    if ($(this.parentNode.parentNode).attr('data-index') === '0') {
                        $($('.layui-transfer-active').find('button')[0]).removeClass('layui-btn-disabled');
                    } else if ($(this.parentNode.parentNode).attr('data-index') === '1') {
                        $($('.layui-transfer-active').find('button')[1]).removeClass('layui-btn-disabled');
                    }
                }
                //全局数据
                var id = $(this).find('input[name="layTransferLeftCheck"]').val();
                for (let i = 0; i < dataList.length; i++) {
                    if (id === dataList[i].id) {
                        dataList[i].checked = !dataList[i].checked;
                        break;
                    }
                }
            });
        }

        $('.layui-transfer-active').find('button').bind('click', function () {
            if ($(this).hasClass('layui-btn-disabled')) {
                return false;
            }
            if ($(this).attr('data-index') === '0') {
                dataList.forEach(function (e) {
                    if (e.checked && !e.selected) {
                        e.checked = false;
                        e.selected = true;
                    }
                });
            } else if ($(this).attr('data-index') === '1') {
                dataList.forEach(function (e) {
                    if (e.checked && e.selected) {
                        e.checked = false;
                        e.selected = false;
                    }
                });
            }
            initTransferData();
        });

        //全选按钮点击事件
        $('.layui-transfer-header .layui-form-checkbox').bind('click', function () {
            let checkedAll = $(this).hasClass('layui-form-checked');
            if (checkedAll) {
                if ($(this.parentNode.parentNode).attr('data-index') === '0') {
                    if ($(this.parentNode.parentNode).find('li').length > 0) {
                        $(this.parentNode.parentNode).find('li .layui-form-checkbox').addClass('layui-form-checked');
                        $($('.layui-transfer-active').find('button')[0]).removeClass('layui-btn-disabled');
                    }
                    dataList.forEach(function (e) {
                        if (!e.selected) {
                            e.checked = true;
                        }
                    });
                } else if ($(this.parentNode.parentNode).attr('data-index') === '1') {
                    if ($(this.parentNode.parentNode).find('li').length > 0) {
                        $(this.parentNode.parentNode).find('li .layui-form-checkbox').addClass('layui-form-checked');
                        $($('.layui-transfer-active').find('button')[1]).removeClass('layui-btn-disabled');
                    }
                    dataList.forEach(function (e) {
                        if (e.selected) {
                            e.checked = true;
                        }
                    });
                }
            } else {
                if ($(this.parentNode.parentNode).attr('data-index') === '0') {
                    if ($(this.parentNode.parentNode).find('li').length > 0) {
                        $(this.parentNode.parentNode).find('li .layui-form-checkbox').removeClass('layui-form-checked');
                        $($('.layui-transfer-active').find('button')[0]).addClass('layui-btn-disabled');
                    }
                    dataList.forEach(function (e) {
                        if (!e.selected) {
                            e.checked = false;
                        }
                    });
                } else if ($(this.parentNode.parentNode).attr('data-index') === '1') {
                    if ($(this.parentNode.parentNode).find('li').length > 0) {
                        $(this.parentNode.parentNode).find('li .layui-form-checkbox').removeClass('layui-form-checked');
                        $($('.layui-transfer-active').find('button')[1]).addClass('layui-btn-disabled');
                    }
                    dataList.forEach(function (e) {
                        if (e.selected) {
                            e.checked = false;
                        }
                    });
                }
            }
        });
    });
</script>
</body>
</html>
